<template>
  <div class="app">
    <h1>生成自签名证书</h1>

    <form @submit.prevent="submitForm" class="form">
      <div class="form-group">
        <label>DNS Names:</label>
        <div v-for="(dns, index) in dnsNames" :key="index" class="input-group">
          <input type="text" v-model="dnsNames[index]" placeholder="Enter DNS Name" class="input-field" />
          <button type="button" @click="removeDNS(index)" class="delete-btn">删除</button>
        </div>
        <button type="button" @click="addDNS" class="add-btn">添加DNS Name</button>
      </div>

      <div class="form-group">
        <label>IP Addresses:</label>
        <div v-for="(ip, index) in ipAddresses" :key="index" class="input-group">
          <input type="text" v-model="ipAddresses[index]" placeholder="Enter IP Address" class="input-field" />
          <button type="button" @click="removeIP(index)" class="delete-btn">删除</button>
        </div>
        <button type="button" @click="addIP" class="add-btn">添加IP Address</button>
      </div>

      <button type="submit" class="submit-btn">生成证书</button>
    </form>

    <div v-if="certificateData" class="certificate-container">
      <h2>生成的证书内容</h2>

      <!-- <pre class="certificate-content">{{ certificate }}</pre>
      <button @click="downloadCertificate" class="download-btn">下载证书文件</button> -->

      <div v-if="certificateData.ca_key">
        <h3>CA Key</h3>
        <pre class="certificate-content">{{ certificateData.ca_key }}</pre>
        <button @click="downloadFile('ca_key.pem', certificateData.ca_key)" class="download-btn">下载 CA Key</button>
      </div>
      
      <div v-if="certificateData.ca_certificate">
        <h3>CA Certificate</h3>
        <pre class="certificate-content">{{ certificateData.ca_certificate }}</pre>
        <button @click="downloadFile('ca_certificate.pem', certificateData.ca_certificate)" class="download-btn">下载 CA Certificate</button>
      </div>

      <div v-if="certificateData.service_key">
        <h3>Service Key</h3>
        <pre class="certificate-content">{{ certificateData.service_key }}</pre>
        <button @click="downloadFile('service_key.pem', certificateData.service_key)" class="download-btn">下载 Service Key</button>
      </div>

      <div v-if="certificateData.service_certificate">
        <h3>Service Certificate</h3>
        <pre class="certificate-content">{{ certificateData.service_certificate }}</pre>
        <button @click="downloadFile('service_certificate.pem', certificateData.service_certificate)" class="download-btn">下载 Service Certificate</button>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dnsNames: [""],
      ipAddresses: [""],
      certificateData: null
    };
  },
  methods: {
    addDNS() {
      this.dnsNames.push("");
    },
    removeDNS(index) {
      this.dnsNames.splice(index, 1);
    },
    addIP() {
      this.ipAddresses.push("");
    },
    removeIP(index) {
      this.ipAddresses.splice(index, 1);
    },
    async submitForm() {
      try {
        const response = await axios.post("http://127.0.0.1:5000/ca", {
          dnsNames: this.dnsNames.filter(name => name),
          ipAddresses: this.ipAddresses.filter(ip => ip)
        });
        // console.log("Response:", response.data);
        this.certificateData = response.data;
      } catch (error) {
        console.error("Error:", error);
      }
    },
    downloadCertificate(filename, content) {
      const blob = new Blob([content], { type: "text/plain" });
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    }
  }
};
</script>

<style scoped>
.app {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.delete-btn {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-btn {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #2196f3;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.certificate-container {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.certificate-content {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.download-btn {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
